<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scrumster</title>
<link rel="stylesheet" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
	<div id="header">
		<table>
			<tr>
				<td>
					<div class="logo">
						<a href="index.jsp" id="logo"><img src="images/WhiteLogo.png"
							border="0" alt="logo" style="height: 30px"></a>
					</div>
				</td>

				<td align="right">
					<font size="2" face="verdana" color="#EEEEEE">Hi ${user.firstName}! </font>
					<a href="notifications.jsp"><img
							src="images/notifications.png" alt="notifications"></a> <a
							href="search.jsp"><img src="images/browser.png"
							alt="browser"></a> <a href="create.jsp"><img
							src="images/create.png" alt="create"></a> <a
							href="profile.jsp"><img src="images/profile.png"
							alt="profile"></a> <a href="settings.jsp"><img
							src="images/settings.png" alt="settings"></a> <a href="logout"><img
							src="images/logout.png" alt="logout"></a>
				</td>
			</tr>
		</table>

	</div>

	<div id="container">
		<nav>
		<ul class="clearfix">
			<li><a href="#" id="taskboard">Taskboard</a></li>
			<li><a href="#" id="statistics">Statistics</a></li>
			<li><a href="#" id="discussions">Discussions</a></li>
			<li><a href="#" id="project">Project</a></li>
			<li><a href="#" id="scrum">Scrum</a></li>
		</ul>
		</nav>

		<div id="content"></div>

	</div>

</body>

<script>
	$(document).ready(function() {
		$("#logo").on("click", function() {
			$("#content").load("taskboard.jsp");
		});

		$("#taskboard").on("click", function() {
			$("#content").load("taskboard.jsp");
		});

		$("#discussions").on("click", function() {
			$("#content").load("discussions.jsp");
		});

		$("#project").on("click", function() {
			$("#content").load("project.jsp");
		});

		$("#scrum").on("click", function() {
			$("#content").load("scrum.jsp");
		});
		
		$("#statistics").on("click", function() {
	        $("#content").load("statistics.html");
	    });

		$("#content").load("taskboard.jsp");

	});
</script>
</html>